<template>
  <div id="app">
    <div class="formBox">
      <div class="leftBackground"></div>
      <div class="rightForm">
        <h3>账号密码登录</h3>
        <a-form
          name="custom-validation"
          ref="formRef"
          :model="formState"
          :rules="rules"
          v-bind="layout"
          @finish="handleFinish"
          @finishFailed="handleFinishFailed"
        >
          <div style="font-size: small">账号</div>
          <a-form-item name="id" has-feedback >
            <a-input 
             style="width:100%" 
              placeholder="请输入账号"
              v-model:value="formState.id"
              autocomplete="off"
              
            />
          </a-form-item>
          <div style="font-size: small">密码</div>
          <a-form-item name="pass" has-feedback>
            <a-input   style="width:100%" 
              placeholder="请输入密码"
              v-model:value="formState.pass"
              type="password"
              autocomplete="off"
            />
          </a-form-item>
          <a-button type="primary" style="width: 200px" @click="login"
            >登录</a-button
          >
        </a-form>
      </div>
    </div>
  </div>
</template>

<script>
import { defineComponent, reactive, ref } from "vue";
import { get, post, tip, setLocalToken } from "@/common";
import { useRouter } from "vue-router";

export default defineComponent({
  setup() {
    const router = useRouter();
    const login = () => {
      const jsonStr = JSON.stringify(formState.id);
      const encodeStr = encodeURIComponent(jsonStr);
      const admin = {
        adminId:'',
        adminPass:'',
      }
      admin.adminId = formState.id;
      admin.adminPass = formState.pass;
      post("/ops/login",admin).then((res) => {
        tip.success("登录成功");
        const token = res.data; //获取返回的令牌
        setLocalToken(token); //将令牌存储到本地
        //跳转路径
        router.push({ path: "/mainpage", query: { data: encodeStr } });
      });
    };

    const formRef = ref();
    const formState = reactive({
      id: "",
      pass: "",
    });

    let validatePass = async (rule, value) => {
      if (value === "") {
        return Promise.reject("请输入密码");
      } else {
        return Promise.resolve();
      }
    };

    let validateId = async (rule, value) => {
      if (value === "") {
        return Promise.reject("请输入账号");
      } else {
        return Promise.resolve();
      }
    };

    const rules = {
      id: [
        {
          validator: validateId,
          trigger: "change",
        },
      ],
      pass: [
        {
          validator: validatePass,
          trigger: "change",
        },
      ],
    };
    const layout = {
      labelCol: {
        span: 4,
      },
      wrapperCol: {
        span: 14,
      },
    };

    const handleFinish = (values) => {
      console.log(values, formState);
    };

    const handleFinishFailed = (errors) => {
      console.log(errors);
    };

    const resetForm = () => {
      formRef.value.resetFields();
    };

    return {
      formState,
      formRef,
      rules,
      layout,
      login,
      handleFinishFailed,
      handleFinish,
      resetForm,
    };
  },
});
</script>
<style scoped>
#app {
  position: fixed;
  display: flex;
  height: 100%;
  width: 100%;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

#app .formBox {
  border-radius: 10px;
  display: flex;
  width: 50%;
  height: 65%;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.8);
}

#app .formBox .leftBackground {
  border-radius: 10px 0 0 10px;
  width: 45%;
  height: 100%;
  background-image: url("./images/background1.jpeg");
  background-size: cover;
  background-repeat: no-repeat;
}

#app .formBox .rightForm {
  display: flex;
  border-radius: 10px;
  width: 55%;
  height: 100%;
  background-color: white;
  align-items: center;
  flex-direction: column;
}

#app .formBox .rightForm h3 {
  margin-top: 15%;
  margin-bottom: 5%;
}


</style>
